<template>
  <div class="tab">
    <div class="TABLE3" style="text-align: center;color: #02B3FF;">告警通知栏</div>
    <div class="TABLE1" style="background: #2469BF;">
      <div>#</div>
      <div>告警设备名</div>
      <div>所属配电房</div>
      <div>告警类型</div>
      <div>告警值</div>
      <div>告警时间</div>
      <div>至今持续告警时长</div>
      <div>告警状态</div>
    </div>
    <div class="TABLE2" v-for="item in tableData" @click="tableAlam(item)">
      <div>{{ item.list1 }}</div>
      <div>{{ item.name }}</div>
      <div>{{ item.address }}</div>
      <div>{{ item.report }}</div>
      <div>{{ item.report_lin }}</div>
      <div>{{ item.time }}</div>
      <div class="td1">{{ item.long }}</div>
      <div class="td2">{{ item.state }}</div>
    </div>
  </div>
  <!--
  <el-table
          :header-cell-style="headClass"
          height="170"
          :cell-style="cellStyle"
          :data="tableData">
        <el-table-column
            prop="list1"
            label="#"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="告警设备名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="所属配电房">
        </el-table-column>
        <el-table-column
            prop="report"
            label="告警类型">
        </el-table-column>
        <el-table-column
            prop="report_lin"
            label="告警值">
        </el-table-column>
        <el-table-column
            prop="time"
            label="告警时间">
        </el-table-column>

        <el-table-column
            prop="long"
            label="至今持续告警时常">
        </el-table-column>
        <el-table-column
            style="color: red"
            prop="state"
            label="告警状态">
        </el-table-column>
      </el-table>

  -->
</template>

<script>
export default {
  name: "new_list",
  data() {
    return {
      css_g: 'color:red',
      css_t: '',
      selfstyle: {
        width: "100%",
        background: "red",
        // backgroundImage:"../../assets/bkg_list.png"
      },
      tableData: [
        {
          list1: '001',
          name: '设备名称001',
          address: '配电房00123456',
          report: '温升告警',
          report_lin: 'xxxxxx',
          time: '2023-0220 14:35',
          long: '持续10小时27分',
          state: '告警中'
        }, {
          list1: '022',
          name: '设备名称001',
          address: '配电房00123456',
          report: '温升告警',
          report_lin: 'xxxxxx',
          time: '2023-0220 14:35',
          long: '持续10小时27分',
          state: '告警中'
        }, {
          list1: '001',
          name: '设备名称001',
          address: '配电房00123456',
          report: '温升告警',
          report_lin: 'xxxxxx',
          time: '2023-0220 14:35',
          long: '持续10小时27分',
          state: '告警中'
        }, {
          list1: '001',
          name: '设备名称001',
          address: '配电房00123456',
          report: '温升告警',
          report_lin: 'xxxxxx',
          time: '2023-0220 14:35',
          long: '持续10小时27分',
          state: '告警中'
        }, {
          list1: '001',
          name: '设备名称001',
          address: '配电房00123456',
          report: '温升告警',
          report_lin: 'xxxxxx',
          time: '2023-0220 14:35',
          long: '持续10小时27分',
          state: '告警中'
        }]
    }
  },
  mounted() {
    // this.setSort();
  },
  methods: {
    tableAlam(e){
      console.log(e)
      alert(e.name+"设备报警中，点击确认跳转至相应位置")
    },
    headClass() {
      return 'background:#2469BF'
    },
    cellStyle(row) {//根据报警级别显示颜色
      if (row.column.label === "告警状态") {
        return 'color:red'
      } else if (row.column.label === "至今持续告警时常") {
        return 'color:#00FFF7'
      } else if (row.column.time === "告警时间") {
        return 'white-space:nowrap'
      }
      return "back"
    }
  }
}
</script>

<style scoped lang="scss">
.TABLE1 {
  display: flex;
  width: vw(1760);
  /*border-width: 0;*/
  border: 0;
}

.TABLE1 div {
  width: 15%;
  text-align: center;
}

.TABLE2 {
  width: vw(1760);
  display: flex;
}.TABLE3 {font-size: 20px;
  width: vw(1760);
}
.TABLE2 div{
  text-align: center;
  width: 15%;
}
th {
  text-align: center;
  border-style: none;
}

td {
  text-align: center;
  border-style: none;
}

.TABLE2:hover {
  background: #00BDFF;
}

.td1 {
  color: #00FFF8;
}

.td2 {
  color: red;
}

</style>


<style lang="scss">
.line {
  margin: vh(30);
  width: vw(1700);
  height: vh(270);
}

img {
  height: auto;
  width: auto
}

.tab {
  margin-left: vh(30);
  margin-right: vh(30);
  font-size: 2vh;
  text-align: center;
  width: vw(1000);
  height: vh(170);
  color: #FFFFFF;
  font-weight: 400;
}


</style>
